import { defineComponent, reactive, watch } from 'vue'
import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'

export default defineComponent({
    name: 'MdEditor',
    // emits: ['update:value'],
    props: {
        previewOnly: Boolean
    },
    setup(props) {
        const { value } = props
        // watch(
        //     () => {
        //         return value
        //     },
        //     (v) => {
        //         emit('update:value', v)
        //     }
        // )
        return () => (
            <MdEditor
                hljs={hljs}
                modelValue={value}
                previewOnly={props.previewOnly}
                style="min-height:600px;"
                toobars={[
                    'bold',
                    'underline',
                    'italic',
                    'strikeThrough',
                    'sub',
                    'sup',
                    'quote',
                    'unorderedList',
                    'orderedList',
                    'codeRow',
                    'code',
                    'link',
                    'image',
                    'table',
                    'revoke',
                    'next',
                    'save',
                    'pageFullscreen',
                    'fullscreen',
                    'preview',
                    'htmlPreview'
                ]}
                toolbarsExclude={['github']}
            />
        )
    }
})
